<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Encoded WebSocket Test</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .status {
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        .connected {
            background-color: #d4edda;
            color: #155724;
        }
        .disconnected {
            background-color: #f8d7da;
            color: #721c24;
        }
        .error {
            background-color: #fff3cd;
            color: #856404;
        }
        button {
            padding: 8px 16px;
            margin-right: 10px;
            cursor: pointer;
        }
        #logs {
            height: 300px;
            overflow-y: auto;
            border: 1px solid #ccc;
            padding: 10px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>WebSocket Connection Test (Encoded)</h1>
    <div id="status" class="status disconnected">Disconnected from server</div>
    <div>
        <button id="connectBtn">Connect</button>
        <button id="disconnectBtn">Disconnect</button>
    </div>
    <div id="logs"></div>

    <script>
        const statusElement = document.getElementById('status');
        const logsElement = document.getElementById('logs');
        const connectBtn = document.getElementById('connectBtn');
        const disconnectBtn = document.getElementById('disconnectBtn');

        let socket = null;

        // Generate a random peer ID
        function generatePeerId() {
            return 'test-' + Math.random().toString(36).substring(2, 10);
        }

        // Add log message
        function addLog(message) {
            const logElement = document.createElement('div');
            logElement.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
            logsElement.appendChild(logElement);
            logsElement.scrollTop = logsElement.scrollHeight;
        }

        // Connect to WebSocket server
        connectBtn.addEventListener('click', () => {
            if (socket && socket.readyState === WebSocket.OPEN) {
                addLog('Already connected');
                return;
            }

            const peerId = generatePeerId();
            addLog(`Generating peer ID: ${peerId}`);

            // Create JSON object for id parameter
            const idObj = { id: peerId };
            // Properly encode the JSON object
            const encodedId = encodeURIComponent(JSON.stringify(idObj));

            // Create WebSocket URL with encoded parameters
            const wsUrl = `ws://192.168.50.177:9000/peerjs?key=peerjs&id=${encodedId}&token=7h4ttneq76v&version=1.4.7`;
            addLog(`Connecting to: ${wsUrl}`);

            // Connect to WebSocket server
            socket = new WebSocket(wsUrl);

            // WebSocket event handlers
            socket.onopen = () => {
                statusElement.textContent = 'Connected to server';
                statusElement.className = 'status connected';
                addLog('Connected to server');
            };

            socket.onmessage = (event) => {
                addLog(`Received: ${event.data}`);
            };

            socket.onclose = (event) => {
                statusElement.textContent = `Disconnected from server. Code: ${event.code}, Reason: ${event.reason}`;
                statusElement.className = 'status disconnected';
                addLog(`Disconnected. Code: ${event.code}, Reason: ${event.reason}`);
            };

            socket.onerror = (error) => {
                statusElement.textContent = `Error: ${error.message || 'Unknown error'}`;
                statusElement.className = 'status error';
                addLog(`Error: ${error.message || 'Unknown error'}`);
            };
        });

        // Disconnect from WebSocket server
        disconnectBtn.addEventListener('click', () => {
            if (socket) {
                socket.close();
                socket = null;
            }
        });
    </script>
</body>
</html>